<template>
  <z-modal
    :width="600"
    v-bind="modalOption"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template slot="footer">
      <a-button key="back" @click="handleCancel">{{disableSubmit?"关闭":'取消'}}</a-button>
      <a-button type="primary" :loading="confirmLoading" @click="handleOk" v-if="!disableSubmit">确定</a-button>
      <a-button type="dashed" :loading="confirmLoading" @click="handleTest" v-if="!disableSubmit">测试</a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <a-form-model layout="horizontal" labelAlign="right" ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" :model="form" :rules="validatorRules">
        <a-row>
          <a-col :span="24" >
            <a-form-model-item label="连接名称" prop="name">
              <a-input placeholder="请输入连接名称" :disabled="disableSubmit" v-model.trim="form.name"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" >
            <a-form-model-item label="数据库类型" prop="dbType">
              <z-dict-select-tag v-model="form.dbType" :disabled="disableSubmit" :options="typesOptions"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" >
            <a-form-model-item label="JDBC驱动类" prop="driverClass">
              <a-input placeholder="请输入JDBC驱动类" :disabled="disableSubmit" v-model.trim="form.driverClass"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" >
            <a-form-model-item label="数据库连接URL" prop="url">
              <a-input placeholder="请输入数据库连接URL" :disabled="disableSubmit" v-model.trim="form.url"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" >
            <a-form-model-item label="数据库用户名" prop="username">
              <a-input placeholder="请输入数据库用户名" :disabled="disableSubmit" v-model.trim="form.username"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" >
            <a-form-model-item label="数据库密码" prop="password">
              <a-input-password autocomplete="new-password" placeholder="请输入数据库密码" :disabled="disableSubmit" v-model.trim="form.password"/>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </z-modal>
</template>

<script>
import ModalFormMixin from '@/mixins/ModalFormMixin'
import ZDictSelectTag from '@/components/dict/ZDictSelectTag'
import { getAction, postAction } from '@/services/manage'
export default {
  name: 'DbConsoleModal',
  mixins: [ModalFormMixin],
  components: {
    ZDictSelectTag
  },
  data() {
    return {
      validatorRules: {
        name: [{ required: true, message: '请输入连接名称', trigger: 'change' }],
        dbType: [{ required: true, message: '请选择数据库类型' }],
        driverClass: [{ required: true, message: '请输入JDBC驱动类' }],
        url: [{ required: true, message: '请选择数据库类型' }],
        username: [{ required: true, message: '请输入数据库用户名' }],
        password: [{ required: true, message: '请输入数据库用密码' }]
      },
      url: {
        add: '/dbconsole/db/add',
        edit: '/dbconsole/db/edit',
        types: '/dbconsole/db/types',
        test: '/dbconsole/db/test'
      },
      typesOptions: [],
      destroyOnClose: false
    }
  },
  methods: {
    addAfter() {

    },
    classifyIntoFormData() {
      return { ...this.form }
    },
    getTypes() {
      getAction(this.url.types).then(res => {
        if (res.success) {
          this.typesOptions = []
          res.result.forEach(item => {
            this.typesOptions.push({
              label: item.dbType,
              value: item.dbType
            })
          })
        }
      })
    },
    handleTest() {
      postAction(this.url.test, this.form).then(res => {
        if (res.success) {
          this.$message.success('连接成功')
        }
      })
    }
  },
  mounted() {
    this.getTypes()
  }
}
</script>

